<template>
    <div class="exclusive-event">
      <h1>精彩专属活动</h1>
  
      <!-- 活动详情部分 -->
      <section class="event-details">
        <h2>活动详情</h2>
        <p>参与我们的<span class="highlight">专属活动</span>，尽享独家优惠！</p>
        <p>活动时间：<strong>{{ eventDate }}</strong></p>
        <p>活动地点：<strong>{{ eventLocation }}</strong></p>
      </section>
  
      <!-- 活动内容部分 -->
      <section class="event-content">
        <h2>活动内容</h2>
        <ul>
          <li v-for="(item, index) in eventItems" :key="index">
            <div class="event-item">
              <img :src="item.image" alt="活动产品">
              <div class="item-details">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
                <p class="price">原价：<del>{{ item.originalPrice }}元</del></p>
                <p class="discount-price">活动价：<strong>{{ item.discountPrice }}元</strong></p>
              </div>
            </div>
          </li>
        </ul>
      </section>
  
      <!-- 活动参与按钮 -->
      <button class="participate-btn" @click="showForm = true">立即参与活动</button>
  
      <!-- 参与表单弹窗 -->
      <transition name="fade">
        <div class="participate-form" v-if="showForm">
          <h2>填写参与信息</h2>
          <form @submit.prevent="submitForm">
            <label for="name">姓名：</label>
            <input type="text" id="name" v-model="formData.name" required>
            
            <label for="email">邮箱：</label>
            <input type="email" id="email" v-model="formData.email" required>
            
            <button type="submit">确认参与</button>
          </form>
          <button class="close-btn" @click="showForm = false">关闭</button>
        </div>
      </transition>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const eventDate = '2024年12月31日';
  const eventLocation = '线上及线下各大门店';
  const eventItems = [
    {
      title: '特别款手表',
      description: '限量版设计，精美时尚。',
      originalPrice: 999,
      discountPrice: 799,
      image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.rGn5Fk6PAuSufwitG4AZ-gHaHa?rs=1&pid=ImgDetMain'
    },
    {
      title: '定制礼品套装',
      description: '精心定制的礼品套装，包含多种精美礼品。',
      originalPrice: 299,
      discountPrice: 199,
      image: 'https://img.alicdn.com/bao/uploaded/i1/3392972100/O1CN01nPRVcu1RNqKxTb5uR_!!0-item_pic.jpg'
    },
    {
        title: '限量版手机壳',
        description: '限量版设计，精美时尚。',
        originalPrice: 199,
        discountPrice: 149,
        image: 'https://cbu01.alicdn.com/img/ibank/O1CN01u5wZme1D128zRUu5Q_!!2927220155-0-cib.jpg'
    },
    {
        title: '精美手表壳',
        description: '精美手表壳，可用于手机、电脑、电视等。',
        originalPrice: 199,
        discountPrice: 149,
        image: 'https://cbu01.alicdn.com/img/ibank/O1CN010qDKhA1KVuBIuebHh_!!4058901170-0-cib.jpg'
    },
    {
        title: '精美手机壳',
        description: '精美手机壳，可用于手机、电脑、电视等。',
        originalPrice: 199,
        discountPrice: 149,
        image: 'https://cbu01.alicdn.com/img/ibank/O1CN01nANn5h2L4G3LCUSRb_!!2214426089638-0-cib.jpg?__r__=1659602521376'
    }
  ];
  
  const showForm = ref(false);
  const formData = {
    name: '',
    email: ''
  };
  
  const submitForm = () => {
    // 处理表单提交逻辑，可以发送数据到服务器或执行其他操作
    console.log('Form submitted:', formData);
    showForm.value = false; // 提交后关闭表单
  };
  </script>
  
  <style scoped>
  .exclusive-event {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1, h2, h3 {
    color: #333;
  }
  
  .highlight {
    color: #ff9900;
    font-weight: bold;
  }
  
  .event-details, .event-content {
    margin-bottom: 30px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  .event-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .event-item img {
    width: 120px;
    height: 120px;
    margin-right: 20px;
    border-radius: 8px;
    object-fit: cover;
  }
  
  .item-details {
    flex: 1;
  }
  
  .price {
    color: #999;
  }
  
  .discount-price {
    color: #e91e63;
    font-size: 1.2em;
    margin-top: 5px;
  }
  
  .participate-btn {
    background-color: #e91e63;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .participate-btn:hover {
    background-color: #ff4081;
  }
  
  .participate-form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
  }
  
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  
  .close-btn {
    background-color: #ddd;
    color: #333;
    border: none;
    padding: 8px 16px;
    font-size: 1em;
    margin-top: 10px;
    cursor: pointer;
  }
  </style>
  